<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>count: {{ count }}</p>
      <button @click="count++">btn</button>
      <button @click="fn">btn2</button>
      <button @click="fn2">btn3</button>

      <hr />

      <p>{{ obj }}</p>
      <button @click="obj.a++">btn</button>

      <hr />

      <p class="obj2">{{ obj2 }}</p>
      <button @click="obj2.c++">btn</button>
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      let unwatch;

      createApp({
        data() {
          return {
            count: 1,
            obj: {
              a: 3,
            },
            obj2: {
              b: 4,
              c: 5,
            },
          };
        },

        // created() {
        //   this.$watch("count", (val, oldVal) => {
        //     // ...
        //     console.log("count从" + oldVal + "变成了" + val);
        //   });
        // },

        methods: {
          fn() {
            // 在某些特定的时候再开启的时候比较有用
            // 可以动态的去添加或者取消侦听效果
            unwatch = this.$watch("count", (val, oldVal) => {
              // ...
              console.log("count从" + oldVal + "变成了" + val);
            });
          },
          fn2() {
            // 关闭上面的侦听器
            unwatch();
          },
        },

        // updated() {
        //   console.log("count改变了");
        // },

        // 侦听器，可以侦听响应式数据的变化
        // 侦听器可以接收两个参数
        // 侦听器可以去处理副作用（异步操作）
        watch: {
          // count(val, oldVal) {
          //   setTimeout(() => {
          //     console.log("count改变了", val, oldVal);
          //   }, 1000);
          // },
          // 可以使用链式调用去侦听对象下面属性的变化
          "obj.a"() {
            console.log("obj的a改变了");
          },
          // 默认情况下是侦听不到对象的改变的
          // 如果侦听复杂类型，需要写成对象，使用deep:true;
          // obj2() {
          //   console.log("obj2改变了");
          // },
          obj2: {
            handler() {
              console.log(
                "obj2改变了",
                document.querySelector(".obj2").innerHTML
              );
            },
            // 深度监听
            deep: true,
            // 强制立即执行回调, 初始化先做一次
            // immediate: true,
            // 默认回调时在页面渲染完之前执行的，加上页面渲染完之后执行
            flush: "post",
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
